<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const changeSideBar = (path) => {
    router.push(path);
};
</script>

<template>
    <div>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside style="width: 300px; min-height: 100vh; background-color: #8c939d;">
                <div
                    style="height: 100px;font-size: 25px; background-color: #8c939d; color: white; display: flex; align-items: center; justify-content: center;border-bottom: solid;border-color: #a9a9a9;">
                    云主机告警后台
                </div>
                <el-menu router background-color="#8c939d" text-color="rgba(255,255,255,0.65)" active-text-color="#fff"
                    style="border: none; font-size: 25px;" @select="changeSideBar" :default-active="$route.path">
                    <el-menu-item index="/alert/records" class="menu-item">
                        <i class="el-icon-document"></i>
                        <span slot="title">告警异常记录</span>
                    </el-menu-item>
                    <el-menu-item index="/alert/rules" class="menu-item">
                        <i class="el-icon-document"></i>
                        <span slot="title">告警规则</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 头部区域 -->
                <el-header
                    style="background-color:#F5E3BF ; display: flex; align-items: center; justify-content: center;">
                    <div style=""><strong>金山云02组-范进小队</strong></div>
                </el-header>

                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.menu-item {
    font-size: 20px;
}
</style>
